<template>
    <el-dialog v-model="visible" title="角色菜单编辑" @close="closed" @open="init" :before-close="cancel" @opened="opened" :close-on-press-escape="false">
        <el-row style="margin-bottom:18px">
            <el-col :span="10" style="line-height: 32px">
                正在为角色 {{role.roleNameCh}} 设置权限菜单
            </el-col>
            <el-col :span="4" :offset="1">
                <el-checkbox label="全选_全不选" @change="checkAllChange" v-model="checkAll" border/>
            </el-col>
            <el-col :span="4" :offset="1">
                <el-checkbox label="全部展开_收起" @change="toggleExpand" v-model="expandAll" border/>
            </el-col>
        </el-row>
        <el-row class="menu-bar">
            <el-col :span="24">
                <el-tree :data="this.$store.state.menuOptions" ref="menuTreeRef" :default-checked-keys="defaultCheckedKeys" node-key="value"
                         :check-strictly="checkStrictly" show-checkbox :indent="30" :height="400"/>
            </el-col>
        </el-row>
        <template #footer>
            <el-button @click="cancel">取消</el-button>
            <el-button @click="submit" type="primary">确认</el-button>
        </template>
    </el-dialog>
</template>

<script>
import {reactive, ref, toRefs} from "vue";
import {getMenuOptions} from "../../../../network/sys/menu";
import {updateRoleMenu} from "../../../../network/sys/role-menu";
import {ElLoading} from "element-plus";

export default {
    name: "RolePermissionForm",
    emits:['refresh-data'],
    data(){
        return{
            visible:false,
            checkStrictly: true,
            checkAll: false,
            expandAll: false,
            role: {
                id: null,
                roleName: null,
                roleNameCh: null,
                menuIds: [],
            },
            defaultCheckedKeys: []
        }
    },
    methods:{
        setRole({id,roleName,roleNameCh,menuIds}){
            this.role.id = id;
            this.role.roleName = roleName;
            this.role.roleNameCh = roleNameCh;
            this.role.menuIds = menuIds;
        },
        submit(){
            let treeData = this.$refs.menuTreeRef;
            let strictCheckedKeys = treeData.getCheckedKeys();
            let halfChecksKeys = treeData.getHalfCheckedKeys();
            let roleMenu = {
                roleId: this.role.id,
                menuList: strictCheckedKeys.concat(halfChecksKeys),
            }
            // console.log('roleMenu',roleMenu);
            this.$operate.confirm({
                title: '修改角色菜单',
                hint: '你确定要保存修改吗？',
                executeFn: ()=>{
                    let loading = ElLoading.service({
                        text: '正在修改角色菜单...',
                        lock: true
                    })
                    updateRoleMenu(roleMenu).then(vo=>{
                        loading.close();
                        this.$response.handle({
                            data: vo,
                            success: '修改成功',
                            successFn: ()=>{
                                this.$emit('refresh-data');
                                this.visible = false;
                            },
                            log: '修改角色菜单结果'
                        })
                    })
                }
            })
        },
        cancel(){
            this.$operate.confirm({
                title: '取消编辑',
                hint: '你确定要取消编辑吗',
                executeFn:()=>{
                    this.visible = false;
                }
            })
        },
        checkAllChange(){
            this.checkStrictly = true;
            let selection = this.checkAll ? this.$store.state.menuOptions : [];
            // this.$nextTick(()=>{
                this.$refs.menuTreeRef.setCheckedNodes(selection);
            // })
        },
        toggleExpand(){
            for (let i = 0; i < this.$refs.menuTreeRef.store._getAllNodes().length; i++) {
                this.$refs.menuTreeRef.store._getAllNodes()[i].expanded = this.expandAll;
            }
        },
        loadMenuOptions(){
            getMenuOptions().then(vo=>{
                this.$response.handle({
                    data: vo,
                    successFn:()=>{
                        this.$store.commit('setMenuOptions',vo.data)
                    },
                    log: '设置菜单选项'
                })
            })
        },
        closed(){
            // console.log('this.$refs.menuTreeRef',this.$refs.menuTreeRef)
            this.$refs.menuTreeRef.setCheckedKeys([]);
            Object.assign(this.$data,this.$options.data.call(this))
            this.toggleExpand();
        },
        init(){
            // console.log('open this.checkStrictly',this.checkStrictly)
            this.defaultCheckedKeys = this.role.menuIds;
            if(this.$store.state.menuOptions.length===0){
                this.loadMenuOptions();
            }
        },
        opened(){
            this.checkStrictly = false;
            // console.log('opened this.checkStrictly',this.checkStrictly)
        }
    },
    created() {
        this.init();
    }
}
</script>

<style scoped>
*{
    /*border: 1px solid red;*/
}
.menu-bar{
    height: 320px;
    overflow-y: scroll;
    box-shadow: 0 0 2px #b2b2b2;
}
.operate-bar{
    margin: 20px 0;
}
</style>
<style>
.el-dialog__body{
    padding-top: 14px;
}
</style>